<template>
	<view>
		<view class="mt-5" v-if="u_loadmore">
			<u-loadmore status="loading" icon-type="circle" />
		</view>
		<view v-else>
			<view class="">
				<view class="rounded-20 m-2 pl-3  bg-white">
					<view class="d-flex j-sb pr-2 py-3">
						<view class="">{{user_rank[0].rank_name}}<text class="text-light-muted">({{user_rank[0].discount}}.0%)</text></view>
						<view class="d-flex j-center a-center">
							<input type="digit" @input="visitor_input" v-model="visitor" :placeholder="user_rank[0].price" class="text-right" placeholder-class="d-flex j-end" />
						</view>
					</view>		
				</view>
				<view class="rounded-20 m-2 pl-3  bg-white">
					<view class="d-flex j-sb pr-2 py-3">
						<view class="">{{user_rank[1].rank_name}}<text class="text-light-muted">({{user_rank[1].discount}}.0%)</text></view>
						<view class="d-flex j-center a-center">
							<input type="digit" @input="stair_input" v-model="stair" :placeholder="user_rank[1].price" class="text-right" placeholder-class="d-flex j-end" />
						</view>
					</view>		
				</view>
				<view class="rounded-20 m-2 pl-3  bg-white">
					<view class="d-flex j-sb pr-2 py-3">
						<view class="">{{user_rank[2].rank_name}}<text class="text-light-muted">({{user_rank[2].discount}}.0%)</text></view>
						<view class="d-flex j-center a-center">
							<input type="digit" @input="level_input" v-model="level" :placeholder="user_rank[2].price" class="text-right" placeholder-class="d-flex j-end" />
						</view>
					</view>		
				</view>
				<view class="rounded-20 m-2 pl-3  bg-white">
					<view class="d-flex j-sb pr-2 py-3">
						<view class="">{{user_rank[3].rank_name}}<text class="text-light-muted">({{user_rank[3].discount}}.0%)</text></view>
						<view class="d-flex j-center a-center">
							<input type="digit" @input="fully_input" v-model="fully" :placeholder="user_rank[3].price" class="text-right" placeholder-class="d-flex j-end" />
						</view>
					</view>		
				</view>
			</view>
			
			<view class="py-2 d-flex flex-column j-end mr-2">
				<view class="d-flex j-end font-sm">会员价格默认为-1,表示会员价格会按照等级折扣计算,</view>
				<view class="d-flex j-end font-sm">可也为每个等级设置一个固定价格。</view>
			</view>
			<view class="bg-white py-2 w-100 position-fixed bottom-0 btn">
				<button type="warn" @click="preserve">保存</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user_rank:'', // 会员列表
				goods_id:"", // 商品iD
				u_loadmore:true, // 加载中
				goods_detail:"", // 商品详情
				
				visitor:"", // 游客价
				stair:"", // 一级
				level:"", // 二级
				fully:"", // 三级
			}
		},
		methods: {
			visitor_input(e){
				this.visitor=e.detail.value
				this.user_rank[0].price=e.detail.value
			},
			stair_input(e){
				this.stair=e.detail.value
				this.user_rank[1].price=e.detail.value
			}, 
			level_input(e){
				this.level=e.detail.value
				this.user_rank[2].price=e.detail.value
			}, 
			fully_input(e){
				this.fully=e.detail.value
				this.user_rank[3].price=e.detail.value
			},
			preserve(){
				
				let user_rank=[];
				user_rank=this.user_rank.map(v=>{
					return {
						rank_id:v.rank_id,
						price:v.price
					}
				})
				console.log(user_rank)
				this.$H.post("admin/merchant/goods/price/updateAll",{
					goods_id:this.goods_id,
					shop_price:this.goods_detail.shop_price.replace("￥",''),
					cost_price:this.goods_detail.cost_price.replace("￥",''),
					market_price:this.goods_detail.market_price.replace('￥',''),
					user_rank:user_rank
				}).then(res=>{
					console.log(res)
					uni.navigateBack({
						delta:1
					})
				})
			}
		},
		onLoad(e) {
			this.goods_id=e.goods_id
			this.$H.post("admin/merchant/goods/detail",{goods_id:e.goods_id}).then(res=>{
				this.user_rank=res.data.user_rank
				this.goods_detail=res.data
				this.u_loadmore=false 
			})
		},
	}
</script>

<style>
	.btn /deep/ button{
		width: 85%;
		border-radius: 50upx;
		background: linear-gradient(to right,#F31E3E,#FB4F37);
	}
</style>
